<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { RouterView, useRouter } from 'vue-router'
import { useThemeStore } from '@/stores/theme'
import TheHeader from '@/components/layout/TheHeader.vue'
import TheFooter from '@/components/layout/TheFooter.vue'
import { useIframeComm } from '@/composables/useIframeComm'

const themeStore = useThemeStore()
const router = useRouter()
const { initIframeComm, isIframe } = useIframeComm()

// 初始化主题
onMounted(() => {
  themeStore.initTheme()
  
  // 初始化iframe通信
  const cleanup = initIframeComm(router)
  
  // 如果在iframe中，隐藏header和footer
  if (isIframe.value) {
    document.documentElement.classList.add('in-iframe')
  }
  
  // 组件卸载时清理
  return () => {
    if (typeof cleanup === 'function') {
      cleanup()
    }
  }
})

// 监听主题变化
watch(
  () => themeStore.darkMode,
  (isDark) => {
    if (isDark) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  },
  { immediate: true }
)
</script>

<template>
  <div class="flex flex-col min-h-screen transition-colors duration-200">
    <!-- <TheHeader v-if="!isIframe" /> -->
    <main class="flex-grow container mx-auto px-4 py-8" :class="{ 'iframe-content': isIframe }">
      <RouterView />
    </main>
    <!-- <TheFooter v-if="!isIframe" /> -->
  </div>
</template>

<style>
.in-iframe body {
  margin: 0;
  padding: 0;
}

.iframe-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 100%;
  overflow-y: auto;
}
</style> 